<!DOCTYPE html>
<html>

<head lang="en">
    <base href="<%= resource%>"/>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="css/myreset.min.css"/>
    <link rel="stylesheet" href="css/swiper.3.1.2.min.css"/>
    <link rel="stylesheet" href="css/zepto.plugin.css"/>
    <!--link rel="stylesheet" href="css/index.css?t=3"/-->
    <link rel="stylesheet" media="screen and (max-width:751px)" href="css/index.css?t=3422"/>
    <link rel="stylesheet" media="screen and (min-width:751px)" href="css/index_1.css"/>
    <link rel="stylesheet" href="css/animate.min.css">
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?9d46dd0b3453217f2f10ef34861203aa";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!--<style>-->
    <!--@media screen and (width: 320px) and (max-width: 480px) {-->
    <!--#page-1 {-->
    <!--overflow: scroll;-->

    <!--}-->

    <!--#page-1 .video-area {-->
    <!--overflow: scroll;-->
    <!--height: auto;-->
    <!--padding: 88px 0 0;-->
    <!--}-->

    <!--#page-1 .footer-area {-->
    <!--position: relative;-->
    <!--}-->
    <!--}-->
    <!--</style>-->

    <title>启初 听宝宝的话</title>
</head>

<body style="overflow: hidden">
<div class="swiper-container" id="swiper-page">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-no-swiping" id="page-1">
            <div class="title-area">
                <div class="title">宝宝你究竟闹哪样？</div>
                <div class="f-title">
                    <span class="org-create">原创</span><span class="time">2015-11-30</span>
                    <a class="listen-baby" href="javascript:;">
                        <span>听宝宝的话</span>
                    </a>
                </div>
            </div>

            <div class="video-area">
                <div class="poster">
                    <div class="play-btn-bg">
                        <div class="play-btn">
                        </div>
                    </div>
                </div>
                <div class="ender">
                    <div class="end-btn"></div>
                </div>
                <div class="video-box">
                    <video id="video" x-webkit-airplay="true" webkit-playsinline="true" preload="auto"
                               src="http://snowforce-porsche.weixinzjit.com/video/1.mp4"></video>
                    <div class="b-w"></div>
                </div>
            </div>

            <div class="footer-area">
                <div>
                    <div class="read-org">阅读原文</div>
                    <div class="read-num">阅读100000+</div>
                    <div class="zan-num"><img src="images/page-1/zan.jpg" alt=""/>
                        <sapn class="num"></sapn>
                    </div>
                    <div class="jubao">举报</div>
                </div>
            </div>
        </div>
        <div class="swiper-slide swiper-no-swiping opa" id="page-2">
            <div class="word-baby">
                <img class="ani" src="images/page-2/word-baby.png" alt="" swiper-animate-effect="fadeInDown"
                     swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            </div>

            <div class="baby">
                <img class="ani" src="images/page-2/baby.png" alt="" swiper-animate-effect="fadeInUp"
                     swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            </div>

            <div class="next-btn">
                <img class="normal ani" src="images/page-2/btn.png" alt="" swiper-animate-effect="fadeInUp"
                     swiper-animate-duration="0.5s" swiper-animate-delay="1.3s"/>
                <img class="click" src="images/page-2/btn-2.png" alt=""/>
            </div>

            <div class="gif">
                <img class="ani" src="images/page-2/111.gif" alt="" swiper-animate-effect="fadeIn"
                     swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
            </div>

            <div class="desc-area">
                <div class="desc-1">
                    <div class="d-1-p">
                        <img src="images/page-2/images/d-1-p.png" alt=""/>
                    </div>
                    <div class="d-1-w">
                        <img src="images/page-2/images/d-1-w.png" alt=""/>
                    </div>
                </div>
                <div class="desc-2">
                    <div class="d-2-w">
                        <img src="images/page-2/images/d-2-w.png" alt=""/>
                    </div>
                    <div class="d-2-p">
                        <img src="images/page-2/images/d-2-p.png" alt=""/>
                    </div>
                </div>
                <div class="desc-3">
                    <div class="d-3-p">
                        <img src="images/page-2/images/d-3-p.png" alt=""/>
                    </div>
                    <div class="d-3-w">
                        <img src="images/page-2/images/d-3-w.png" alt=""/>
                    </div>
                </div>
                <div class="desc-4">
                    <div class="d-4">
                        <img src="images/page-2/images/d-4.png" alt=""/>
                    </div>
                    <div class="d-5">
                        <img src="images/page-2/images/d-5.png" alt=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide swiper-no-swiping" id="page-3">
            <div class="upload-img" data-top="0" data-left="0">
                <div class="logo">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="logo-2">
                    <img src="images/logo-2.png" alt="">
                </div>
                <div id="position" data-dx="0" data-dy="0">
                    <img id="target" class="bg" src="" alt="" data-scale="1"/>
                </div>
            </div>
            <div class="btn-area set-size">
                <img src="images/page-3/btn-bg.jpg" alt=""/>

                <div class="btn reset">
                    <img src="images/reselect.png" alt="" class="normal"/>
                    <img src="images/reselect-2.png" alt="" class="click"/>
                </div>
                <div class="btn next">
                    <img src="images/next.png" alt="" class="normal"/>
                    <img src="images/next-2.png" alt="" class="click"/>
                </div>
            </div>

            <div class="btn-area set-sex">
                <img src="images/page-3/sex-bg.jpg" alt="">

                <div class="sex-boy set-option">
                    <img class="normal" src="images/page-3/boy.png" alt="">
                    <img class="click" src="images/page-3/boy2.png" alt="">
                </div>
                <div class="sex-girl set-option">
                    <img class="normal" src="images/page-3/girl.png" alt="">
                    <img class="click" src="images/page-3/girl2.png" alt="">
                </div>

                <div class="btn reset">
                    <img src="images/reselect.png" alt="" class="normal"/>
                    <img src="images/reselect-2.png" alt="" class="click"/>
                </div>
                <div class="btn next">
                    <img src="images/next.png" alt="" class="normal"/>
                    <img src="images/next-2.png" alt="" class="click"/>
                </div>
            </div>

            <div class="btn-area set-os">
                <img src="images/page-3/os-bg.png" alt=""/>

                <div class="os-list">
                    <div class="swiper-container" id="swiper-os">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os1.png" data-music="/os/girl/os1.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os1.png" data-music="/os/boy/os1.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os2.png" data-music="/os/girl/os2.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os2.png" data-music="/os/boy/os2.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os3.png" data-music="/os/girl/os3.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os3.png" data-music="/os/boy/os3.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os4.png" data-music="/os/girl/os4.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os4.png" data-music="/os/boy/os4.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os5.png" data-music="/os/girl/os5.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os5.png" data-music="/os/boy/os5.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os6.png" data-music="/os/girl/os6.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os6.png" data-music="/os/boy/os6.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os7.png" data-music="/os/girl/os7.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os7.png" data-music="/os/boy/os7.mp3" alt=""/>
                            </div>
                            <div class="swiper-slide">
                                <img class="girl-os" src="os/girl/os8.png" data-music="/os/girl/os8.mp3" alt=""/>
                                <img class="boy-os" src="os/boy/os8.png" data-music="/os/boy/os8.mp3" alt=""/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="btn-direction left">
                    <img src="images/page-3/left-btn.png" alt="" class="normal"/>
                    <img src="images/page-3/left-btn-2.png" alt="" class="click"/>
                </div>
                <div class="btn-direction right">
                    <img src="images/page-3/right-btn.png" alt="" class="normal"/>
                    <img src="images/page-3/right-btn-2.png" alt="" class="click"/>
                </div>

                <div class="btn reset">
                    <img src="images/reselect.png" alt="" class="normal"/>
                    <img src="images/reselect-2.png" alt="" class="click"/>
                </div>
                <div class="btn next">
                    <img src="images/next.png" alt="" class="normal"/>
                    <img src="images/next-2.png" alt="" class="click"/>
                </div>
            </div>

        </div>
        <div class="swiper-slide swiper-no-swiping" id="page-4">
            <div class="make-img">
                <img class="bg" src="" alt=""/>

                <div class="music-2">
                    <img src="images/yinfu.gif" alt=""/>
                </div>
            </div>
            <div class="btn-area">
                <img src="images/page-4/btn-area.jpg" alt=""/>

                <div class="btn reset">
                    <img src="images/page-4/reset.png" alt="" class="normal"/>
                    <img src="images/page-4/reset2.png" alt="" class="click"/>
                </div>

                <div class="btn get-prize">
                    <img class="normal" src="images/page-4/get-prize.png" alt=""/>
                    <img class="click" src="images/page-4/get-prize2.png" alt=""/>
                </div>
            </div>
        </div>
        <div class="swiper-slide swiper-no-swiping" id="page-5">
            <div class="word">
                <img src="images/page-5/word.png" alt=""/>
            </div>
            <div class="code">
                <div class="code1" id="tcodeewm">
                    <img src="images/page-5/code_01.png" alt=""/>
                </div>
            </div>
            <div class="code2">
                <img src="images/page-5/code_02.png" alt=""/>
            </div>
            <div class="btn">
                <img class="normal" src="images/page-5/btn.png" alt=""/>
                <img class="click" src="images/page-5/btn2.png" alt=""/>
            </div>
            <div class="mark"></div>
        </div>
        <div class="swiper-slide swiper-no-swiping" id="page-6">
            <div class="prize">
                <img src="images/page-6/prize.png" alt=""/>
            </div>

            <div class="input">
                <input type="text" placeholder="姓名" id="name"/>
            </div>
            <div class="input">
                <input type="text" placeholder="手机" id="phone"/>
            </div>
            <div class="input">
                <input type="text" placeholder="地址" id="address"/>
            </div>

            <div class="btn">
                <img class="normal" src="images/page-6/btn.png" alt=""/>
                <img class="click" src="images/page-6/btn2.png" alt=""/>
            </div>

            <div class="dialog-input">
                <div class="d-bg">
                    <img src="images/page-6/dialog-bg.png" alt="">

                    <div class="d-word">
                        <img class="phone-format" src="images/page-6/dialog-word-phone.png" alt="">
                        <img src="images/page-6/dialog-word-name.png" alt="" class="no-name"/>
                        <img src="images/page-6/dialog-word-address.png" alt="" class="no-address"/>
                    </div>
                    <div class="d-btn">
                        <img class="normal" src="images/page-6/dialog-btn.png" alt="">
                        <img class="click" src="images/page-6/dialog-btn2.png" alt=""/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="dialog">
    <img src="images/do-share.png" alt=""/>
</div>
<audio id="audio" src=""></audio>
<script src="js/my-zepto.js"></script>
<script src="js/zepto.js"></script>
<script src="js/touch-0.2.14.min.js"></script>
<script src="js/swiper.3.1.2.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/ejs_production.js"></script>
<script src="js/base.js"></script>
<script src="js/howler.min.js"></script>
<script src="js/zepto.plugin.js"></script>
<!--script src="js/jweixin-1.0.0.js"></script-->
<!--script src="js/wxtk.js"></script-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!--<script src="http://page.socialmaster.com.cn/lib/wx.min.js"></script>-->
<!--<script src="http://page.socialmaster.com.cn/lib/wx-check.js"></script>-->
<script src="js/wx.min.js"></script>
<script src="js/wx-check.js"></script>
<!--script src="js/weixin.js"></script-->


<script src="js/index.js?t=57"></script>
<script src="js/scale.js"></script>
<script src="js/extend.js"></script>
<script type="text/html" id="t-plugin">
    <div class="plugin focus">
        <div class="img">
            <img src="[%= imgurl %]" alt=""/>
        </div>
        <div class="remove control">
            <img src="images/page-3/close.png" alt=""/>
        </div>
        <div class="resize control">
            <img src="images/page-3/resize.png" alt=""/>
        </div>
        <div class="shun control">
            <img src="images/page-3/shunshizhen.png" alt=""/>
        </div>
        <div class="ni control">
            <img src="images/page-3/nishizhen.png" alt=""/>
        </div>
    </div>
</script>

<script type="text/html" id="t-dialog">
    </script>
<script>
    $("#video").one("timeupdate", function () {
        $("#page-1.video-area").addClass("play");
        $("#page-1.video-area.b-w").show();
        var videoH = $("#video").height();
        var s_h = $(window).height() - 88 - 72;
        var s_w = $(window).width();
        var y_s = s_h / videoH + 0.02;
        var BL = s_w / 640;
        $("#video").height(parseInt(BL * 766)).width(s_w + 2).css({'margin-left': -1});
    });
</script>
<script>
    SM_TRACK.DEBUG = false;
    var apt = {
        title: '宝宝你想闹哪样？', // 分享标题
        desc: "哄娃秘诀在这里！聪明的妈妈都已经点开啦~", // 分享描述
        //link: "http://qichugiving.weixinzjit.com/Index/share?id=" + data.id, // 分享链接
        imgUrl: "http://qichugiving.weixinzjit.com/images/share2.jpg", // 分享图标
        success: function () {
            alert("分享成功");
        },
        cancel: function () {
        }
    };
    SM_TRACK.setAppMessage(apt);
    var opt = {
        title: "宝宝你想闹哪样？", // 分享标题
        desc: "哄娃秘诀在这里！聪明的妈妈都已经点开啦~", // 分享描述
        //link: "http://qichugiving.weixinzjit.com/Index/share?id=" + data.id, // 分享链接
        imgUrl: "http://qichugiving.weixinzjit.com/images/share2.jpg", // 分享图标
        success: function () {
            alert("分享成功");
        },
        cancel: function () {
        }
    };
    SM_TRACK.setTimeLine(opt);
</script>
</body>

</html>